<template>
	<view class="userinfo">
		<view class="info">
			<u-avatar
				:customStyle="{ marginRight: '20rpx' }"
				:src="avatar"
			></u-avatar>
			<view class="username">
				<!-- <text>{{ userInfo.nickname }}</text> -->
				<text>{{ username }}</text>
			</view>
			<view class="arrow-right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="gird">
			<u-grid
				:col="3"
				:border="false"
				style="margin: 30rpx 0"
			>
				<u-grid-item name="/pages/my/fans">
					<text>{{ followersCount || 0 }}</text>
					<view class="grid-text">粉丝</view>
				</u-grid-item>
				<u-grid-item name="/pages/my/follow">
					<text>{{ followingCount || 0 }}</text>
					<view class="grid-text">关注</view>
				</u-grid-item>
				<u-grid-item name="/pages/my/post">
					<text>{{ posts || 0 }}</text>
					<view class="grid-text">帖子</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
export default {
	name: 'userInfo',
	data() {
		return {
			src: ''
		};
	},
	props: {
		// 用户名
		username: {
			type: String
		},
		// 粉丝儿
		followersCount: {
			type: Number | String
		},
		// 发布过的卡片(帖子)
		posts: {
			type: Number | String
		},
		// 头像
		avatar: {
			type: String
		},
		// 我的关注
		followingCount: {
			type: Number | String
		},
		totalLikes: {
			type: Number | String
		}
	},
	methods: {
		goToMyPage() {
			uni.navigateTo({
				url: '/pages/myPages/myPages'
			});
		}
	},
	mounted() {
		console.log(this.posts);
	}
};
</script>

<style lang="scss" scoped>
.userinfo {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 20rpx;
	box-shadow: 0px 3px 15px -3px rgba(0, 0, 0, 0.1);
	.info {
		width: 85%;
		display: flex;
		align-items: center;
		height: 50px;
		// padding-left: 50rpx;
	}
	.gird {
		width: 100%;
	}
	.arrow-right {
		margin-left: auto;
	}
}

.userinfo .username {
	display: flex;
	flex-direction: column;
}
</style>
